<template>
  <div>
    <el-drawer title="购物车" :visible.sync="drawerFlag" direction='rtl'>
      <div class="car-content" v-if="drawerFlag">
        <div v-for="x in list" @change="handleCheckedChange">
          <div class="car-item">
            <div class="car-item-top">
              <div class="checked-content">
                <el-checkbox v-model="x.select" @change="changeSelect"></el-checkbox>
              </div>
              <div class="item-content">
                <img :src="$url.fileUrl + x.filesImg1" alt="">
                <div class="msg-content">
                  <p class="title">{{ x.title }}</p>
                  <p class="calssification">{{ x.categoryName }}</p>
                </div>
              </div>
            </div>
            <div class="item-bottom">
              <div class="oper">
                <span @click="del(x)">移除</span>
                <span @click="coll(x)">收藏</span>
              </div>
              <div class="price">
                个人授权<span class="money">{{x.individualPrice || 0}}</span><span class="unit">元</span>
              </div>
            </div>
          </div>
        </div>
        <div class="car-bottom">
          <div class="bottom-operation">
            <div class="b-left">
              <el-checkbox v-model="isSelectAll" @change="handleCheckAllChange">全选</el-checkbox>
            </div>
            <div class="b-total">总计<span class="money">{{ totalPrice }}</span><span class="unit">元</span></div>
          </div>
          <div class="submit-btn" @click="gotoBuy">立即下载</div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import http from "@/api/info/car"

export default {
  props: {
    flag: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    flag(n) {
      if(!n)return;
      this.init()
    }
  },
  name: 'Car',
  data(){
    return{
      isSelectAll: false,
      list: [],
      checkAll: [],
      checkedList: [],
      isIndeterminate: true,
      demoImg: 'https://pic.vjshi.com/2021-12-03/d437f218ecb1478a91bd8d54cf9053e7/online/03a8038db33c48ff9090ae3704c0c5c4.jpg?x-oss-process=style/resize_w_285_crop_h_428'
    }
  },
  computed: {
    // isSelectAll: {
    //   get() {
    //     let l = true
    //     this.list.forEach(v => {
    //       if(!v.select) l = false
    //     })
    //     console.log(l)
    //     return l
    //   },
    //   set(val) {
    //     this.list.forEach(v => {
    //       v.select = val
    //     })
    //   }
    // },
    totalPrice() {
      let l = 0;

      (this.list || []).forEach(v => {
        if(v.select) l += v.individualPrice
      })
      return l
    },
    drawerFlag: {
      get() {
        return this.flag
      },
      set(val) {
        this.$emit('update:flag',val)
      }
    }
  },
  methods: {
    changeSelect() {
      let l = true
      this.list.forEach(v => {
        if(!v.select) l = false
      })
      this.isSelectAll = l
    },
    /**
     * 跳转到购买页面
     */
    gotoBuy() {
      const ids = []
      this.list.forEach(v => {
        if(v.select) ids.push(v.basketId)
      })
      if(ids.length === 0) {
        return this.$message.error('最少选择一个')
      }
      this.drawerFlag = false
      this.$router.push('/account/down?id=' + ids.join(','));
    },
    init() {
      http.carList({
        userId: sessionStorage.getItem('userId'),
      }).then(res => {
        this.list = res.data.list
      })
    },
    handleCheckedChange(value) {
      // let checkedCount = value.length;
      console.log(value)
      // debugger
      // this.checkAll = checkedCount === this.cities.length;
      // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    del(data) {
      http.deleteCar({
        basketId: data.basketId
      }).then(res => {
        this.$message.success('移除成功')
        this.init()
      })
    },
    coll(data) {
      http.saveCollect({
        userId: sessionStorage.getItem("userId"),
        bizId: data.prodId
      }).then(res => {
        this.$message.success('收藏成功')
      })
    },
    handleCheckAllChange(val) {
      this.list.forEach(v => {
        v.select = val
      })
    }
  }
}
</script>

<style scoped>
.car-content{
  position: relative;
  box-sizing: border-box;
  padding: 12px;
  background: rgb(246, 249, 252);
  min-height: calc(100vh - 186px);
}
.car-item{
  padding-left: 16px;
  padding-right: 12px;
  cursor: pointer;
  background: var(--chilid-nav-bg);
}
.car-item-top{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 12px;
}
.checked-content{
  margin-right: 12px;
}
.item-content{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.item-content img{
  width: 120px;
  height: 68px;
}
.msg-content{
  flex: 1;
  padding-left: 12px;
}
.msg-content p.title{
  font-size: var(--title-small);
  height: 24px;
  line-height: 24px;
  margin-bottom: 8px;
}
.msg-content p.calssification{
  font-size: var(--content);
  color: var(--nav-color);
}
.item-bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid #f5f5f5;
}
.oper{
  padding-left: 28px;
  opacity: 0;
}
.oper span{
  margin-right: 12px;
  font-size: var(--content);
  color: var(--green);
}
.car-item:hover .oper {
  opacity: 1;
}
.price{
  font-size: var(--content);
}
.money{
  font-size: var(--title-small);
  color: red;
}
.unit{
  color: red;
  font-size: var(--small);
}
.car-bottom{
  width: 30%;
  position: fixed;
  bottom: 0;
  right: 0;
}
.bottom-operation{
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  margin: 0 24px;
  padding: 12px 0;
}
.submit-btn{
  text-align: center;
  height: 56px;
  line-height: 56px;
  background-color: var(--green);
  color: #fff;
  font-size: var(--title);
  font-weight: 600;
}
</style>